<template>
  <div
    ref="canvas"
    style="
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      margin: 0;
      padding: 0;
      background: black;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      color: white;
    "
    :style="{
      background: 'url(' + backgroundImage + ')',
    }"
  >
    <div style="flex: 6; height: 100%"></div>
    <div
      style="
        flex: 4;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      "
    >
      <div
        style="
          width: 80%;
          height: 60%;
          background: linear-gradient(to bottom, #0b43a1, #08205a);
          border: solid 1px #1381c9;
          display: flex;
          flex-direction: column;
        "
      >
        <div
          style="
            width: 100%;
            flex: 2;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 3vw;
          "
        >
          中控系统
        </div>
        <div
          style="
            width: 100%;
            flex: 8;
            border-top: solid 2px #1381c9;
            display: flex;
            flex-direction: column;
            align-items: center;
          "
        >
          <div
            style="
              width: 85%;
              display: flex;
              align-items: center;
              margin-top: 1vw;
            "
          >
            <img src="../assets/user.png" style="width: 1vw" alt="" />
            <div style="font-size: 1vw; margin-left: 0.5vw">用户名</div>
          </div>
          <div style="width: 85%; display: flex; align-items: center">
            <input
              v-model="loginForm.userName"
              type="text"
              style="
                width: 100%;
                background: #17479c;
                border: solid 1px #366fc4;
                font-size: 1vw;
                margin: 1vw 0;
              "
            />
          </div>
          <div style="width: 85%; display: flex; align-items: center">
            <img src="../assets/lock.png" style="width: 1vw" alt="" />
            <div style="font-size: 1vw; margin-left: 0.5vw">密码</div>
          </div>
          <div style="width: 85%; display: flex; align-items: center">
            <input
              v-model="loginForm.password"
              type="password"
              style="
                width: 100%;
                background: #17479c;
                border: solid 1px #366fc4;
                font-size: 1vw;
                margin: 1vw 0;
              "
            />
          </div>
          <div
            style="width: 85%; display: flex; justify-content: space-between"
          >
            <div style="display: flex; align-items: center">
              <!-- <input  v-model="rememberPassword" type="checkBox" style="width: 1vw" />
              <div style="font-size: 1vw">记住密码</div> -->
              <!-- <el-checkbox v-model="rememberPassword">记住密码</el-checkbox> -->
            </div>
            <!-- <div style="display: flex; align-items: center"> -->
              <!-- <input  v-model="autoLogin" type="checkBox" style="width: 1vw" />
              <div style="font-size: 1vw">自动登录</div> -->
              <!-- <el-checkbox v-model="autoLogin">自动登录</el-checkbox> -->
            <!-- </div> -->
          </div>
          <button
            @click="login"
            style="
              background: #3172c0;
              color: white;
              width: 8vw;
              height: 3vw;
              font-size: 1vw;
              border: 0;
              margin-top: 5vh;
            "
          >
            登录
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../axios/request";
export default {
  data() {
    return {
      backgroundImage: require("../assets/loginBackground.png"),
      password: null,
      loginForm: {
        userName: null,
        password: null,
      },
      rememberPassword: false,
      autoLogin: false,
    };
  },
  methods: {
    async login() {
      let res = await request({
        url: "/user/api/login",
        method: "POST",
        data: this.loginForm,
      });
      if (res.data.status == 200) {
        console.log(this.rememberPassword);
        console.log(this.autoLogin);
        localStorage.setItem("user_name", this.loginForm.userName);
        localStorage.setItem("password", this.loginForm.password);
        localStorage.setItem("rememberPassword", this.rememberPassword);
        localStorage.setItem("autoLogin", this.autoLogin);
        localStorage.setItem("token", res.data.data);
        this.$router.push("/homePage");
      }
    },
    async enterByPassword() {
      let res = await request({
        url: "/language/api/checkPassword/" + this.password,
        method: "GET",
      });
      if (res.data.status == 200 && res.data.data == true) {
        this.$router.push("/homePage");
      }
    },
  },
  mounted() {
    this.rememberPassword = Boolean(localStorage.getItem("rememberPassword"));
    this.autoLogin = Boolean(localStorage.getItem("autoLogin"));
    console.log(this.rememberPassword, this.autoLogin);
    if (this.rememberPassword) {
      this.loginForm.userName = localStorage.getItem("user_name");
      this.loginForm.password = localStorage.getItem("password");
    }
    // if (this.autoLogin) {
    //   this.login()
    // }
  },
};
</script>

<style scoped>
</style>